<template>
  <page-wrap ref="pageWrap" hideTab :title="dynamicTitle" :show-top="isSticky" back dark hideSafeArea
    :bg-color="dynamicColor">
    <view class="adv-page">
      <scroll-view class="container" scroll-y="true" @scroll="myPageScroll" scroll-with-animation :scroll-top="scrollTop">
        <view class="inner" @click.stop.prevent="handlePageClick">
          <view class="tab-content" :class="{ 'sticky': true, 'whiteBg': isSticky }">
            <image class="tab-image" :src="iconImage1" @click="tabClick(0)"></image>
            <image class="tab-image" :src="iconImage2" @click="tabClick(1)"></image>
            <image class="tab-image" :src="iconImage3" @click="tabClick(2)"></image>
          </view>
          <view class="searchCardContainer first">
            <searchCardVue @getElementPositions="getElementPositions" />
          </view>
          <view class="searchCardContainer">
            <searchCardVue :isSearchJob="true" @getElementPositions="getElementPositions" />
          </view>
          <view class="searchCardContainer">
            <searchSalaryCard />
          </view>
          <view class="collegeAdAskBottom" @click="handleBottomClick">
            <img :src="collegeAdAskBottom" alt="">
          </view>
          <view class="collegeAdAskBottomBlock">
          </view>
        </view>
      </scroll-view>
    </view>
    <u-popup class="consultant-popup"
      :custom-style="{ background: 'transparent', 'padding-top': '50rpx', 'border-radius': '24rpx' }"
      v-model="consultantQRCodeShow" :mask-close-able="true" :closeable="true" mode="center" close-icon-size="40">
      <view class="consultant-popup-container">
        <u-image class="pop-image" @click="clickButtonAciton" width="400rpx" height="400rpx"
          :src="consultantQRCode"></u-image>
        <text class="consultant-popup-tips">
          识别/扫描二维码，添加顾问咨询高考志愿
        </text>
      </view>
    </u-popup>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
// 这个页面有两个！！！如果你要修改这个页面记得搜索出另外一个进行修改
import share from "@/mixins/share";
import searchCardVue from "./components/searchCard.vue";
import LoginDialog from "@/components/LoginDialog";
import searchSalaryCard from "./components/searchSalaryCard.vue";
import { addBuryingPoint } from "@/api/modules/career";
export default {
  mixins: [share],
  components: {
    searchCardVue,
    searchSalaryCard,
    LoginDialog,
  },
  data() {
    return {
      consultantQRCodeShow: false,
      consultantQRCode:
        this.$imgBaseSelf + "career/positionDictionary/consultantQRCode.png",
      dynamicTitle: "",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      sharePath: `/pagesSub/careerGrow/collegeAdvertise/index?${this.shareQuery}`,
      shareTitle: "查一查高薪专业，高就业率专业",
      imageUrl: "",
      scrollTop: 0,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      elementDistances: [],
      collegeAdAskBottom:
        this.$imgBaseSelf + "career/positionDictionary/collegeAdAskBottom.png",
      iconImage1:
        this.$imgBaseSelf + "career/positionDictionary/adv_major_icon.png",
      iconImage2:
        this.$imgBaseSelf + "career/positionDictionary/adv_job_icon.png",
      iconImage3:
        this.$imgBaseSelf + "career/positionDictionary/adv_salary_icon.png",
      adv_title_icon:
        this.$imgBaseSelf +
        "career/positionDictionary/adv_salary_title_icon.png",
      isSticky: false,
      scrollDomId: "",
      dynamicColor: "transparent",
      navHeight: getApp().globalData.navHeight,
      buryingPointId: "",
      cardType: "",
    };
  },
  onReady() {
    // this.getElementPositions();
  },
  onShow() {
    this.buryingPointId = "";
    //  埋点统计访问次数
    this.addBuryingPointFn(20037, "", "", "", "");

    // 埋点统计时长
    this.addBuryingPointFn(20038, "60", "", "", "");
  },
  onHide() {
    console.log("这里进入了onHide周期");
    this.addBuryingPointFn(20038, "60", "", "", "");
  },
  onUnload() {
    console.log("这里进入了onUnload周期");
    this.addBuryingPointFn(20038, "60", "", "", "");
  },
  onLoad(opt) {
    this.imageUrl =
      "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/collegeAdvertiseShareImage.png";
    let jumpPersonId = "";
    if (opt.jumpPersonId) {
      jumpPersonId = opt.jumpPersonId;
    }
    let jumpSource = "";
    if (opt.jumpSource) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = "";
    if (opt.sourceType) {
      sourceType = opt.sourceType;
    }
    
    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10`;
    this.sharePath = `/pagesSub/careerGrow/collegeAdvertise/index?${this.shareQuery}`;

    this.shareCareerInfoParams = {
      etId: 20039,
      id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
      personId: uni.getStorageSync("person-id").slice(2) || "0",
      cardType: this.cardType ? this.cardType : uni.getStorageSync("cardType") || this.cardType,
      consultantId: uni.getStorageSync("sellId")
        ? uni.getStorageSync("sellId")
        : "",
      originType: this.originFrom == "shareLink" ? 10 : 20,
      statType: "40",
      jumpPersonId: jumpPersonId,
      jumpSource: jumpSource,
      sourceType: sourceType,
    };
    //外部链接点击统计事件
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20079, "50", jumpPersonId, jumpSource, sourceType);
      wx.reportEvent("ext_app_college_advertise_click", {});//从外部软件进入营销页
    }
  },
  mounted() { },
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType ? this.cardType : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (etId == 20038) this.buryingPointId = res.data.id;
        }
      }
    },
    handlePageClick(e) {
      //点输入框也会触发。。所以在输入框input的时候再把canShowMajorList=true了
      this.$bus.$emit("closeMajorList");
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.handleBottomClick();
    },
    handleBottomClick() {
      //  埋点统计访问次数
      this.addBuryingPointFn(20045, "", "", "", "");
      wx.reportEvent("consult_help_college_advertise_click", {}); //营销页咨询志愿填报
      // if (!this.personId) {
      //   this.$refs.loginDialog.setVisibility(true);
      //   return;
      // }
      this.consultantQRCodeShow = true;
    },
    getElementPositions() {
      const query = uni.createSelectorQuery().in(this);
      // 选择所有具有searchCardContainer类名的元素
      this.$nextTick(() => {
        query
          .selectAll(".searchCardContainer")
          .boundingClientRect((data) => {
            const distances = data.map(
              (element) => element.top - this.navHeight - 44
            ); // 获取所有元素的top值
            this.elementDistances = distances; // 将距离值保存到数组中
            // console.log("元素距离页面顶部的距离数组:", this.elementDistances);
          })
          .exec();
      });
    },
    myPageScroll(e) {
      //滚动改变颜色
      this.isSticky = e.target.scrollTop > 422;
      if (this.isSticky) {
        this.dynamicColor = "#fff";
        this.dynamicTitle = "高考填报志愿";
      } else {
        this.dynamicColor = "transparent";
        this.dynamicTitle = " ";
      }
      // this.scrollTop = e.target.scrollTop;
    },
    tabClick(index) {
      if (this.elementDistances[index] == this.scrollTop) {
        this.scrollTop = this.elementDistances[index] + 1;
        setTimeout(() => {
          this.scrollTop = this.elementDistances[index];
        }, 0);
      } else {
        this.scrollTop = this.elementDistances[index];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.adv-page {
  width: 100%;

  .container {
    position: relative;
    height: 100vh;

    // padding-top: 1007rpx;
    // width: calc(100vw - 76rpx);
    .inner {
      background-image: url($img-base + "career/positionDictionary/collegeAdBgNew1.png");
      background-color: #0280f9;
      background-repeat: no-repeat;
      background-size: 100% auto;
      padding: 0 38rpx 0;
      padding-top: 1007rpx;
    }

    .tab-content {
      // margin-top: 1007rpx;
      display: flex;
      justify-content: space-between;
      padding: 14rpx 6rpx 0;
      padding-bottom: 37rpx;

      .tab-image {
        width: 185rpx;
        height: 66rpx;
        // background-color: red;
      }
    }

    .searchCardContainer {
      margin-top: 39rpx;
      // &.first {
      //   margin-top: 120rpx;
      // }
    }

    .sticky {
      position: sticky;
      top: 177rpx;
      left: 0;
      width: calc(100vw - 88rpx);
      z-index: 100;
      padding: 0rpx 0rpx;
      padding-top: 15rpx;

      &.whiteBg {
        width: 100vw;
        background-color: white;
        margin-left: -38rpx;
        padding: 15rpx 38rpx;
      }
    }

    .collegeAdAskBottom {
      position: fixed;
      bottom: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 50rpx;

      img {
        width: 707rpx;
        height: 124rpx;
      }
    }

    .collegeAdAskBottomBlock {
      height: 194rpx;
    }
  }
}

.consultant-popup {
  display: flex;
  align-items: center;
  justify-content: center;
}

.consultant-popup-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: white;
  padding: 80rpx 24rpx 24rpx;
  border-radius: 24rpx;

  .consultant-popup-tips {
    margin-top: 20rpx;
  }
}
::v-deep .u-mode-center-box {
  // background-color: transparent !important;
  border-radius: 24rpx !important;
}
</style>
